<html ng-app="myApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>天翼区块链路由器</title>
    <link href="<%=resource%>/imgs/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="<%=resource%>/index.css">
    <link rel="stylesheet" href="<%=resource%>/mobile.css">
    <script type="text/javascript" src="<%=resource%>/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/menu.js"></script>
    <script src="<%=resource%>/angular/angular.js"></script>
    <script src="<%=resource%>/angular/angular-sanitize.min.js"></script>
    <script src="<%=resource%>/angular/angular-animate.min.js"></script>
    <script src="<%=resource%>/js/app/ngapp.js"></script>
    <link href="<%=resource%>/layer/skin/default/layer.css" rel="stylesheet">
    <script src="<%=resource%>/layer/layer.js"></script>
    <style>
       .tab .tab-row {
        width: 300px;
        margin: 0 auto;
        padding: 18px 0;
      }
      .tab-row .inner-wrap {
        width: 80%;
        margin: 0 auto;
      }
      .tab .tab-line {
        border-bottom: 1px solid #E5EDFF;
        font-size: 16px;
      }
      .tab .olib {
        width: 90%;
        margin: 0 auto;
        max-width: 300px;
      }
      .tab .olib .left-half {
        display: inline-block;
        width: 21%;
        text-align: center;
      }
      .tab .olib .right-half {
        display: inline-block;
        width: 76%;
      }
      .right-half .shrink-content {
        position: relative;
        width: 100%;
        max-width: 300px;
      }
      .tab .olib .right-half .btn2 {
        border: solid 1px #2292F5;
        color: #fff;
        height: 32px;
        width: 100%;
        max-width: 300px;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        background: linear-gradient(to right, #1A59E2, #2292F5);
      }
      .tab .olib .font-12 {
        font-size: 14px;
      }
      .tab-row .t {
        width: 50%;
        display: inline-block;
      }
      .tab-row .cd {
        display: inline-block;
      }
      .tab-row .btn {
        width: 300px;
        border-radius: 5px;
        border: 1px solid #8A8F99;
        padding: 10px 0;
        background-color: #fff;
        cursor: pointer;
      }
      .right-half input[type="text"] {
        border: 1px solid #8A8F99;
        padding: 5px 10px;
        border-radius: 3px;
        width: 100%;
        max-width: 300px;
        height: 32px;
      }
      .right-half input[type="password"] {
        border: 1px solid #8A8F99;
        padding: 5px 10px;
        border-radius: 3px;
        width: 100%;
        max-width: 300px;
        height: 32px;
      }
      .right-half .eye-open {
        position: absolute;
        z-index: 2;
        right: 9px;
        width: 20px;
        height: 12px;
        top: 11px;
        cursor: pointer;
      }
      .right-half .eye-close {
        position: absolute;
        z-index: 2;
        right: 9px;
        width: 24px;
        height: 14px;
        top: 9px;
        cursor: pointer;
      }
      @media screen and (max-width: 768px) {
        .tab .tab-row {
          width: 80%;
          margin: 0 auto;
          padding: 12px 0;
        }
        .tab-row .t {
          width: 43%;
          margin-right: 0;
        }
        .tab-row .btn {
          width: 100%;
        }
        .tab .tab-line {
          border-bottom: 1px solid #E5EDFF;
          font-size: 15px;
        }
        .tab .olib .font-12 {
          font-size: 12px;
        }
      }
    </style>
</head>
<body style="background-color: #fff;">
  <div class="wrap">
      <div id="head">
          <span style="margin-left:60px;"></span><img src="<%=resource%>/imgs/logo.png">
          <span style="margin-left:20px;">天翼区块链路由器</span>
          <a href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</a>
          <a href="http://www.skywindlink.com/" target="_blank">访问官网</a>
          <a class="qrcode">APP下载
              <div class="d">
                  <img src="<%=resource%>/imgs/qrcode.jpg">
              </div>
          </a>
      </div>
      <div id="head-phone" style="z-index: 199;">
          <div class="h-left">
              <span><img src="<%=resource%>/imgs/logo.png"></span>
              <span class="h-t">天翼区块链路由器</span>
          </div>
          <div class="h-right">
              <a href="http://www.skywindlink.com/" target="blank">访问官网</a><span class="h-line"> | </span><span class="h-app">APP下载</span>
              <img class="h-nav" src="<%=resource%>/imgs/h-nav.png" alt="">
              <div class="d">
                  <img src="<%=resource%>/imgs/qrcode.jpg">
              </div>
          </div>
      </div>
      <div id="phone-nav">
          <div class="nav-close"><img src="<%=resource%>/imgs/nav-close.png"></div>
          <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "index")%>' style="margin-top: 40px">
              <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
          </div>
          <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
              <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
          </div>
          <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
              <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
          </div>
          <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
              <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
          </div>
          <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
              <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
          </div>
          <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
              <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
          </div>
          <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
              <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
          </div>
          <div class="logout"><span href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</span></div>
      </div>
      <div class="container">
          <div id="menu">
              <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
              </div>
              <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
              </div>
              <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
              </div>
              <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
              </div>
              <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
              </div>
              <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
              </div>
              <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
                  <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
              </div>
          </div>
          <div class="content" ng-controller="networkController">
              <div class="c">
                  <div class="lb">
                      <span>联网设置</span>&nbsp; >&nbsp;
                      <span id="child-title">当前网络</span>
                  </div>
                  <div class="ct wifi-main">
                      <div style="background-color: #f5f5f5;overflow: hidden;">
                          <div class="tb">
                              <div class="tbs" style="width:25%;" ng-repeat="item in tabs" ng-click="switch($index)" ng-class="{'active': $index === currentTab && !isMobileWidth}">
                                  <span ng-class="{ 'tab-active' : $index === currentTab && isMobileWidth }">{{item}}</span>
                              </div>
                          </div>
                      </div>
                      <div class="tab" ng-show="currentTab === 0">
                          <div class="tab-row tab-line">
                            <div class="inner-wrap">
                                <div class="t">联网方式：</div>
                                <div class="cd" ng-if="sysstatus.proto=='pppoe'">宽带PPPoE</div>
                                <div class="cd" ng-if="sysstatus.proto=='static'">静态IP上网</div>
                                <div class="cd" ng-if="sysstatus.proto=='dhcp'">动态IP上网</div>
                            </div>
                          </div>
                          <div class="tab-row tab-line">
                            <div class="inner-wrap">
                              <div class="t">网络地址：</div>
                              <div class="cd">{{sysstatus.ip}}</div>
                            </div>
                          </div>

                          <div class="tab-row tab-line">
                            <div class="inner-wrap">
                                <div class="t">子网掩码：</div>
                                <div class="cd">{{sysstatus.mask}}</div>
                            </div>
                          </div>
                          <div class="tab-row tab-line">
                            <div class="inner-wrap">
                              <div class="t">默认网关：</div>
                              <div class="cd">{{sysstatus.gateWay}}</div>
                            </div>
                          </div>

                          <div class="tab-row">
                            <div class="inner-wrap">
                                <div class="t">首选DNS：</div>
                                <div class="cd">{{sysstatus.dnsAddrs1}}</div>
                            </div>
                          </div>
                          <div class="tab-row">
                            <button class="btn" ng-click="setSwitch(0)">断开连接</button>
                          </div>
                      </div>
                      <div class="tab" ng-show="currentTab === 1">
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="ti">账号</div>
                                  </div>
                                  <div class="right-half">
                                    <input type="text" placeholder="请输入宽带账号" ng-model="PPPOEInfo.username">
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="ti">密码</div>
                                  </div>
                                  <div class="right-half">
                                    <div class="shrink-content">
                                      <input type="password" placeholder="请输入宽带密码" ng-model="PPPOEInfo.password">
                                    </div>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="ti"></div>
                                  </div>
                                  <div class="m-20 right-half">
                                      <button class="btn2" ng-click="setPPPOE()">拨号连接</button>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="tab" ng-show="currentTab === 2">
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">网络地址</div>
                                  </div>
                                  <div class="right-half">
                                    <input type="text" placeholder="请输入网络地址" ng-model="StaticIpInfo.ip">
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">子网掩码</div>
                                  </div>
                                  <div class="right-half"><input type="text" placeholder="请输入子网掩码" ng-model="StaticIpInfo.child"></div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">默认网关</div>
                                  </div>
                                  <div class="right-half">
                                    <input type="text" placeholder="请输入默认网关" ng-model="StaticIpInfo.wlan">
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">首选DNS</div>
                                  </div>
                                  <div class="right-half"><input type="text" placeholder="请输入首选DNS" ng-model="StaticIpInfo.dns1"></div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">备选DNS</div>
                                  </div>
                                  <div class="right-half"><input type="text" placeholder="请输入备选DNS" ng-model="StaticIpInfo.dns2"></div>
                              </div>
                          </div>
                          <div class="row h-80">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12"></div>
                                  </div>
                                  <div class="right-half m-20">
                                      <button class="btn2" ng-click="setStaticIpInfo()">应用</button>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="tab" ng-show="currentTab === 3">
                          <div class="row">
                              <div class="olib">
                                <input type="radio" name="autoset" value="0" ng-model="DymaicIpInfo.autoset">
                                <span>自动设置DNS</span>
                                <input type="radio" name="autoset" value="1" ng-model="DymaicIpInfo.autoset">
                                <span>手动设置DNS</span>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">首选DNS</div>
                                  </div>
                                  <div class="right-half">
                                      <input type="text" ng-if="DymaicIpInfo.autoset!=1" placeholder="系统自动分配DNS" ng-model="DymaicIpInfo.dns1" ng-readonly="DymaicIpInfo.autoset != 1">
                                      <input type="text" ng-if="DymaicIpInfo.autoset==1" placeholder="必填" ng-model="DymaicIpInfo.dns1">
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half">
                                      <div class="font-12">备选DNS</div>
                                  </div>
                                  <div class="right-half">
                                      <input type="text" ng-if="DymaicIpInfo.autoset!=1" placeholder="系统自动分配DNS" ng-model="DymaicIpInfo.dns2" ng-readonly="DymaicIpInfo.autoset != 1">
                                      <input type="text" ng-if="DymaicIpInfo.autoset==1" placeholder="选填" ng-model="DymaicIpInfo.dns2">
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="olib">
                                  <div class="left-half"></div>
                                  <div class="m-20 right-half">
                                      <button class="btn2" ng-click="setDymaicIpInfo()">应用</button>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="footer-new2">
                      <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
                  </div>
              </div>
          </div>
          <div class="hide">
              <div id="loading">
                  <div style="text-align:center;padding:40px;font-size:16px;">正在修改配置，需要30s等待...</div>
                  <div style="text-align: center;"><img style="width:80px;height: 80px;" src="<%=resource%>/imgs/loading.gif"></div>
              </div>
          </div>
      </div>
  </div>
  <div class="footer-new">
    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
  </div>
</body>
</html>
<script type="text/javascript">
  app.controller('networkController', function($scope, $http) {
      $scope.tabs = ['当前网络', '宽带PPPoE', '静态IP上网', '动态IP上网'];
      $scope.currentTab = 0;
      $scope. isMobileWidth = false;
      $scope.sysstatus = {};
      $scope.PPPOEInfo = {
          username: '',
          password: ''
      };
      $scope.StaticIpInfo = {
          ip: '',
          child: '',
          wlan: '',
          dns1: '',
          dns2: ''
      }
      $scope.DymaicIpInfo = {
          autoset: true,
          dns1: '',
          dns2: ''
      }
      $scope.switch = function(index) {
          $scope.currentTab = index;
      }
      $scope.getCurrentInfo = function() {
          var url = '<%=luci.dispatcher.build_url("web", "system", "waninfo")%>';
          $http.post(url).success(function(data) {
              $scope.sysstatus = data.data;
              if (data.code == 0) {
                  $scope.getWaninfo();
              }
          });
      }
      $scope.$watch('DymaicIpInfo.autoset',
            function (newVal,oldVal) {
              if (newVal == 0) {
                $scope.DymaicIpInfo.dns1 = ''
                $scope.DymaicIpInfo.dns2 = ''
              }
        }, true)

      $scope.getWaninfo = function() {
          var url = '<%=luci.dispatcher.build_url("web", "system", "wan")%>';
          $http.post(url).success(function(data) {
              if ($scope.sysstatus.proto == "static") {
                  $scope.StaticIpInfo = {
                      ip: data.data.ipaddr,
                      child: data.data.netmask,
                      wlan: data.data.gateway,
                      dns1: data.data.dns1,
                      dns2: data.data.dns2,
                  }
              }
              if ($scope.sysstatus.proto == "dhcp") {
                  $scope.DymaicIpInfo = {
                      autoset: data.data.autoset,
                      dns1: data.data.dns1,
                      dns2: data.data.dns2
                  }
              }
              if ($scope.sysstatus.proto == "pppoe") {
                  $scope.PPPOEInfo = {
                      username: data.data.username,
                      password: data.data.password
                  };
              }

          });
      };

      $scope.setSwitch = function(act) {
          var url = '<%=luci.dispatcher.build_url("web", "system", "wanswitch")%>';
          var param = {
              act: act
          };
          $http({
              method: 'POST',
              url: url,
              data: $.param(param),
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
          }).success(function(data) {
              //console.log(data);
              if (data.code == 0) {
                  utils.alert('操作成功');
                  //utils.loading(30000, $("#loading").html());
              } else {
                  utils.alert(data.msg);
              }
          });
      }

      $scope.setPPPOE = function() {
          var url = '<%=luci.dispatcher.build_url("web", "system", "wanset")%>';
          var param = {
              proto: 'pppoe',
              username: $scope.PPPOEInfo.username,
              password: $scope.PPPOEInfo.password,
              mtu: 'MTU'
          };
          $http({
              method: 'POST',
              url: url,
              data: $.param(param),
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
          }).success(function(data) {
              console.log(data);
              if (data.code == 0) {
                  utils.loading(30000, $("#loading").html());
              } else {
                  utils.alert(data.msg);
              }
          });
      }

      //todo:ip地址检查
      $scope.setStaticIpInfo = function() {
          var url = '<%=luci.dispatcher.build_url("web", "system", "wanset")%>';
          var param = {
              proto: 'static',
              ipaddr: $scope.StaticIpInfo.ip,
              netmask: $scope.StaticIpInfo.child,
              gateway: $scope.StaticIpInfo.wlan,
              dns1: $scope.StaticIpInfo.dns1,
              dns2: $scope.StaticIpInfo.dns2
          };
          $http({
              method: 'POST',
              url: url,
              data: $.param(param),
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
          }).success(function(data) {
              console.log(data);
              if (data.code == 0) {
                  utils.loading(30000, $("#loading").html());
              } else {
                  utils.alert(data.msg);
              }
          });
      }
      $scope.setDymaicIpInfo = function() {
          if ($scope.DymaicIpInfo.autoset == "1") {
              if ($scope.DymaicIpInfo.dns1.length == 0) {
                  utils.alert("必须设置dns1");
                  return;
              }
              if (!utils.checkIsIp($scope.DymaicIpInfo.dns1)) {
                  utils.alert("dns1的ip地址不正确");
                  return;
              }
              if ($scope.DymaicIpInfo.dns2 != undefined) {
                  if ($scope.DymaicIpInfo.dns2.length > 0) {
                      if (!utils.checkIsIp($scope.DymaicIpInfo.dns2)) {
                          utils.alert("dns2的ip地址不正确");
                          return;
                      }
                  }
              }
          }
          var url = '<%=luci.dispatcher.build_url("web", "system", "wanset")%>';
          var param = {
              proto: 'dhcp',
              autoset: $scope.DymaicIpInfo.autoset,
              dns1: $scope.DymaicIpInfo.dns1,
              dns2: $scope.DymaicIpInfo.dns2
          };
          $http({
              method: 'POST',
              url: url,
              data: $.param(param),
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
          }).success(function(data) {
              console.log(data);
              if (data.code == 0) {
                  utils.loading(30000, $("#loading").html());
              } else {
                  utils.alert(data.msg);
              }
          });
      }
      $scope.init = function() {
          var width = $(window).width()
          if (width < 768) {
              $scope.isMobileWidth = true
          }
          $scope.getCurrentInfo();
      }
      $scope.init();
  });
</script>